<template lang="html">
  <div class="point">
    <div class="main"></div>
  </div>
</template>

<script>
import echarts from 'echarts'
import china from 'echarts/map/js/china'


const USER_NAME = 'elastic'
const PSW = 'elasticl@ethical.cn'
const AUTH_TOKEN = "Basic " + btoa(USER_NAME + ":" + PSW)


export default ({
  name: 'scatterChart',
  data() {
    return {
      cityData: {},
      legendArr: [],
      geoCoordMap: {},
      color: this.$store.state.color,
      shu: {}
    }
  },
  methods: {
    All(data) {
      this.cityData = data
      this.getCityData()
    },
    init(options) {
      this.myChart = echarts.init(document.querySelector('.point .main'))
      this.myChart.setOption(options)
      this.legendArr = options.series
      this.legendArr.forEach((data) => {
        data.selected = true;
      })
      window.addEventListener('resize', function () {
        this.myChart.resize()
      }.bind(this))
    },
    getCityData() {
      for (let s in this.cityData) {
        let zs = []
        zs.push(this.cityData[s].addressCoordinates.lng)
        zs.push(this.cityData[s].addressCoordinates.lat)
        this.shu[this.cityData[s].addressName] = zs;
      }
      this.geoCoordMap = JSON.stringify(this.shu);
      this.$nextTick(() => {
        this.getMyChart()
      })
    },
    convertData(data) {
      let res = [];
      for (let i = 0; i < data.length; i++) {
        let geoCoord = JSON.parse(this.geoCoordMap)[data[i].name]
        if (geoCoord) {
          res.push({
            name: data[i].name,
            value: geoCoord.concat(data[i].value),
            orderNum:data[i].orderNum,
            goodsNum:data[i].goodsNum
          });
        }
      }
      return res;
    },
    getMyChart() {
      let testData = []
      for (let s in this.cityData) {
        let wd = {}
        wd.name = this.cityData[s].addressName
        wd.orderNum = this.cityData[s].addressOrderNum
        wd.goodsNum = this.cityData[s].addressOrderGoodNum
        wd.value = 0
        testData.push(wd)
      }
      let options = {
        title: {
          show: false
        },
        tooltip: {
          trigger: 'item',
          formatter: function (params) {
            return params.data.name + ' : <br/>' + '订单数量：'+ params.data.orderNum + '<br/>' + "货品数量：" + params.data.goodsNum;
          }
        },
        legend: {
          show: false
        },
        geo: {
          map: 'china',
          label: {
            emphasis: {
              show: false
            }
          },
          zoom: 1,
          top: 50,
          itemStyle: {
            normal: {
              color: '#da3232',
              opacity: 0.6,
              borderColor: 'rgb(255,255,255)'
            },
            emphasis: {
              color: 'rgba(234,8,1,0.93)'
            }
          }
        },
        series: [{
          type: 'scatter',
          coordinateSystem: 'geo',
          symbol: 'path://<svg t="1649301012006" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2893" width="200" height="200"><path d="M501.8 880.8c-8.1 0-15.4-5-18.2-12.6l-61.3-162.9c-7.5-19.9-22.3-35.7-40.5-43.4-120.6-50.4-197.3-172-190.9-302.5 7.7-158.2 137.8-287.9 296-295.4 178.9-8.2 326.3 134.4 326.3 311 0 125.4-74.8 237.9-190.5 286.6-18.8 7.9-34.1 24.5-42 45.5l-60.7 161c-2.9 7.6-10.1 12.7-18.2 12.7z m0-778.3c-4.4 0-8.7 0.1-13.1 0.3-138.4 6.5-252.1 120-258.9 258.4-5.6 114.2 61.6 220.7 167 264.8 28.1 11.7 50.7 35.6 61.9 65.6L501.8 806l42.4-112.7c11.6-30.9 34.7-55.6 63.3-67.6C708.7 583 774.2 484.6 774.2 374.9c0-150.2-122.2-272.4-272.4-272.4z" fill="#007AFF" p-id="2894"></path><path d="M501.8 530.6c-85.8 0-155.7-69.8-155.7-155.7S416 219.2 501.8 219.2c85.8 0 155.6 69.8 155.6 155.7s-69.8 155.7-155.6 155.7z m0-272.4c-64.4 0-116.7 52.4-116.7 116.7s52.4 116.7 116.7 116.7c64.4 0 116.7-52.4 116.7-116.7s-52.4-116.7-116.7-116.7zM501.8 958.6c-137.3 0-369.7-20.5-369.7-97.3 0-61.3 145.1-84.5 231.6-92.9 10.8-1.1 20.2 6.8 21.2 17.5 1.1 10.7-6.8 20.2-17.5 21.3C224.8 821 173.5 852 170.9 861.7c5.8 19.8 124.5 58.1 330.8 58.1s325-38.2 330.8-58.7c-3.3-10.9-60-40.5-207.4-53-10.7-0.9-18.6-10.3-17.7-21.1 0.9-10.7 10.1-18.8 21-17.7 90.7 7.7 242.9 29.9 242.9 92.1 0.1 76.7-232.2 97.2-369.5 97.2z" fill="#007AFF" p-id="2895"></path></svg>',
          label: {
            normal: {
              show: false
            },
            emphasis: {
              show: false
            }
          },
          itemStyle: {
            emphasis: {
              borderColor: '#fff',
              borderWidth: 1
            }
          },
          data: this.convertData(testData)
        }, {
          type: 'scatter',
          coordinateSystem: 'geo',
          symbol: 'path://<svg t="1649301012006" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2893" width="200" height="200"><path d="M501.8 880.8c-8.1 0-15.4-5-18.2-12.6l-61.3-162.9c-7.5-19.9-22.3-35.7-40.5-43.4-120.6-50.4-197.3-172-190.9-302.5 7.7-158.2 137.8-287.9 296-295.4 178.9-8.2 326.3 134.4 326.3 311 0 125.4-74.8 237.9-190.5 286.6-18.8 7.9-34.1 24.5-42 45.5l-60.7 161c-2.9 7.6-10.1 12.7-18.2 12.7z m0-778.3c-4.4 0-8.7 0.1-13.1 0.3-138.4 6.5-252.1 120-258.9 258.4-5.6 114.2 61.6 220.7 167 264.8 28.1 11.7 50.7 35.6 61.9 65.6L501.8 806l42.4-112.7c11.6-30.9 34.7-55.6 63.3-67.6C708.7 583 774.2 484.6 774.2 374.9c0-150.2-122.2-272.4-272.4-272.4z" fill="#007AFF" p-id="2894"></path><path d="M501.8 530.6c-85.8 0-155.7-69.8-155.7-155.7S416 219.2 501.8 219.2c85.8 0 155.6 69.8 155.6 155.7s-69.8 155.7-155.6 155.7z m0-272.4c-64.4 0-116.7 52.4-116.7 116.7s52.4 116.7 116.7 116.7c64.4 0 116.7-52.4 116.7-116.7s-52.4-116.7-116.7-116.7zM501.8 958.6c-137.3 0-369.7-20.5-369.7-97.3 0-61.3 145.1-84.5 231.6-92.9 10.8-1.1 20.2 6.8 21.2 17.5 1.1 10.7-6.8 20.2-17.5 21.3C224.8 821 173.5 852 170.9 861.7c5.8 19.8 124.5 58.1 330.8 58.1s325-38.2 330.8-58.7c-3.3-10.9-60-40.5-207.4-53-10.7-0.9-18.6-10.3-17.7-21.1 0.9-10.7 10.1-18.8 21-17.7 90.7 7.7 242.9 29.9 242.9 92.1 0.1 76.7-232.2 97.2-369.5 97.2z" fill="#007AFF" p-id="2895"></path></svg>',
          label: {
            normal: {
              show: false
            },
            emphasis: {
              show: false
            }
          },
          itemStyle: {
            emphasis: {
              borderColor: '#fff',
              borderWidth: 1
            }
          },
          data: this.convertData(testData)
        }, {
          type: 'scatter',
          coordinateSystem: 'geo',
          symbol: 'path://<svg t="1649301012006" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2893" width="200" height="200"><path d="M501.8 880.8c-8.1 0-15.4-5-18.2-12.6l-61.3-162.9c-7.5-19.9-22.3-35.7-40.5-43.4-120.6-50.4-197.3-172-190.9-302.5 7.7-158.2 137.8-287.9 296-295.4 178.9-8.2 326.3 134.4 326.3 311 0 125.4-74.8 237.9-190.5 286.6-18.8 7.9-34.1 24.5-42 45.5l-60.7 161c-2.9 7.6-10.1 12.7-18.2 12.7z m0-778.3c-4.4 0-8.7 0.1-13.1 0.3-138.4 6.5-252.1 120-258.9 258.4-5.6 114.2 61.6 220.7 167 264.8 28.1 11.7 50.7 35.6 61.9 65.6L501.8 806l42.4-112.7c11.6-30.9 34.7-55.6 63.3-67.6C708.7 583 774.2 484.6 774.2 374.9c0-150.2-122.2-272.4-272.4-272.4z" fill="#007AFF" p-id="2894"></path><path d="M501.8 530.6c-85.8 0-155.7-69.8-155.7-155.7S416 219.2 501.8 219.2c85.8 0 155.6 69.8 155.6 155.7s-69.8 155.7-155.6 155.7z m0-272.4c-64.4 0-116.7 52.4-116.7 116.7s52.4 116.7 116.7 116.7c64.4 0 116.7-52.4 116.7-116.7s-52.4-116.7-116.7-116.7zM501.8 958.6c-137.3 0-369.7-20.5-369.7-97.3 0-61.3 145.1-84.5 231.6-92.9 10.8-1.1 20.2 6.8 21.2 17.5 1.1 10.7-6.8 20.2-17.5 21.3C224.8 821 173.5 852 170.9 861.7c5.8 19.8 124.5 58.1 330.8 58.1s325-38.2 330.8-58.7c-3.3-10.9-60-40.5-207.4-53-10.7-0.9-18.6-10.3-17.7-21.1 0.9-10.7 10.1-18.8 21-17.7 90.7 7.7 242.9 29.9 242.9 92.1 0.1 76.7-232.2 97.2-369.5 97.2z" fill="#007AFF" p-id="2895"></path></svg>',
          label: {
            normal: {
              show: false
            },
            emphasis: {
              show: false
            }
          },
          itemStyle: {
            emphasis: {
              borderColor: '#fff',
              borderWidth: 1
            }
          },
          data: this.convertData(testData)
        }]
      }
      this.init(options)
    }
  }
})
</script>

<style>
.point {
  height: 315px;
  background-size: 100% 100%;
}

.main {
  height: calc(100% - 10px);
  width: 100%;
  margin-left: 10px;
  margin-top: -90px;
}
</style>
